<template>
  <Tabs
    centered
    :size="tabSize"
    class="flowDesignerTab"
    :class="`h-full overflow-auto`"
    @change="getActiveKey"
  >
    <template v-if="formEditorType == 3">
      <TabPane key="1" tab="业务表单">
        <FormDesigner ref="formDesignRef" />
      </TabPane>
      <TabPane key="2" tab="专业表单">
        <UeditorFormDesigner ref="ueditorFormDesignRef" />
      </TabPane>
    </template>
    <template v-else-if="formEditorType == 2">
      <TabPane key="2" tab="专业表单">
        <UeditorFormDesigner ref="ueditorFormDesignRef" />
      </TabPane>
      <TabPane key="1" tab="业务表单">
        <FormDesigner ref="formDesignRef" />
      </TabPane>
    </template>
    <TabPane key="1" tab="业务表单" v-if="formEditorType == 1">
      <FormDesigner ref="formDesignRef" />
    </TabPane>
    <TabPane key="2" tab="专业表单" v-if="formEditorType == 0">
      <UeditorFormDesigner ref="ueditorFormDesignRef" />
    </TabPane>
    <TabPane key="3" tab="表单属性">
      <FormManagementEdit />
    </TabPane>
  </Tabs>
</template>
<script lang="ts">
  import { defineComponent, ref, computed, unref, onMounted, nextTick } from 'vue';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { Tabs, TabPane, TabsProps } from 'ant-design-vue';
  import { useRouter } from 'vue-router';
  import { useTitle } from '@vueuse/core';
  import FormDesigner from '/@/views/formDesigner/index.vue';
  import FormManagementEdit from '/@/views/system/workflow/formManagement/formManagementEdit.vue';
  import UeditorFormDesigner from '/@/views/ueditorFormDesigner/index.vue';
  import { useUserStore } from '/@/store/modules/user';

  export default defineComponent({
    name: 'FormEditor',
    components: {
      Tabs,
      TabPane,
      FormDesigner,
      FormManagementEdit,
      UeditorFormDesigner,
    },
    setup(_, { emit }) {
      const selectType = ref('rect');
      const { currentRoute } = useRouter();
      const editFlowChartRef = ref<HTMLElement>(null);
      const activeKey = ref('1');
      const { createMessage } = useMessage();
      const currentQuery: any = ref({});
      const dataRef = ref<Recordable>({});
      const tabSize = ref<TabsProps['size']>('small');
      const formDesignRef = ref<HTMLElement>(null);
      const ueditorFormDesignRef = ref<any>(null);

      const userStore = useUserStore();
      const formEditorType = ref(
        userStore.serverInfo.formEditorType != undefined ? userStore.serverInfo.formEditorType : 0,
      );

      const fetch = async () => {};

      onMounted(() => {
        currentQuery.value = currentRoute.value?.query;
        useTitle(`${currentQuery.value.pageName}`);
        console.log(' currentQuery.value ', currentQuery.value);
        fetch();
      });

      const isShow = ref(true);

      //切换tab
      function getActiveKey(key: number) {
        console.log('getActiveKey key', key);
        if (key == 1) {
          formDesignRef.value?.handleRefresh();
        } else if (key == 2) {
          ueditorFormDesignRef.value?.handleRefresh();
        }
      }

      return {
        editFlowChartRef,
        currentQuery,
        activeKey,
        dataRef,
        selectType,
        isShow,
        tabSize,
        getActiveKey,
        formDesignRef,
        ueditorFormDesignRef,
        formEditorType,
      };
    },
  });
</script>
<style lang="less" scoped>
  // .full-modal {
  //   .ant-modal {
  //     max-width: 100%;
  //     top: 0;
  //     padding-bottom: 0;
  //     margin: 0;
  //   }
  //   .ant-modal-content {
  //     display: flex;
  //     flex-direction: column;
  //     height: calc(100vh);
  //   }
  //   .ant-modal-body {
  //     flex: 1;
  //   }
  // }

  .view-style {
    height: 100vh;
  }

  .flowDesignerTab {
    overflow: auto;
  }
</style>
<style lang="less">
  .flowDesignerTab > .ant-tabs-nav {
    margin: 0 !important;
  }
</style>
